/*
Hacks
====================================
The `hacks.less` contains all dirty hacks like !important or negative margins, so you get a single place to document and set them.

More precise designations are commented inside the document.
*/

    // The product tax information will be filled using a snippet through the administration. The WYSIWYG adds inline styles
    // which needs to be overridden with a ```!important```
.product--tax a {
    text-decoration: none !important;

    &:hover {
        text-decoration: underline !important;
    }
}

    // Webkit based has problems with small "rem"-values which results in an much bigger font as declared.
    // To fix the behavior we need to set the icon size using "px"-values
.js--fancy-select-trigger,
.js--fancy-select-trigger i {
    font-size: 5px;
}

    // Arrow icon is too big on default font size. We have to reduce it manually
.entry--all-results-link i {
    font-size: 8px;
}

.table--shipping-costs-trigger i {
    .unitize-margin(-4, 0, 0, 0);
    font-size: 8px;
}

.table--footer i,
.premium-product--product .btn i,
.compare--button i,
.modal--compare .btn i {
    font-size: 8px;
}

.js--modal {
    // Modalbox should always have the maximum screen size when .is--fullscreen is active
    &.sizing--auto.is--fullscreen {
        height: 100% !important;
        width: 100% !important;
    }

    // Modalbox size should stay constant when the sizing was set to fixed
    &.sizing--fixed {
        max-height: none !important;
        max-width: none !important;
    }
}

    // List items in the menu scroller are not allowed to float or have another display mode then inline-block.
    // This is because we allow items to overflow the list itself and do not have cropping issues.
.js--menu-scroller--item {
    display: inline-block !important;
}

    // Changing the appearance of the scrollbar in filter panels.
.filter-panel--content {

    // IE styles
    scrollbar-arrow-color: @text-color;
    scrollbar-base-color: @body-bg;
    scrollbar-track-color: @body-bg;
    scrollbar-face-color: @border-color;
    scrollbar-highlight-color: @body-bg;
    scrollbar-3dlight-color: @body-bg;
    scrollbar-darkshadow-color: @body-bg;
    scrollbar-shadow-color: @body-bg;

    // WebKit styles
    &::-webkit-scrollbar {
        width: 14px;
        background: @body-bg;
    }
    &::-webkit-scrollbar-track {
        background: @body-bg;
    }
    &::-webkit-scrollbar-thumb {
        background: @border-color;
    }
}

    // inactive class for disabling scrolling on different parts of shopware
.is--inactive {
    overflow: hidden !important;
}

    // Removing unwanted padding on button-elements in firefox
.btn::-moz-focus-inner {
    border: 0;
    padding: 0;
}

@media screen and (min-width: @tabletViewportWidth) {

    // Webkit based has problems with small "rem"-values which results in an much bigger font as declared.
    // To fix the behavior we need to set the icon size using "px"-values
    .top-bar--navigation .entry--service:after,
    .top-bar--navigation .entry--service::after {
        font-size: 5px;
    }

    // Sidebar arrow down size for all menus greater than level 0
    .sidebar--navigation .is--level1 .navigation--entry.has--sub-children.is--active:before,
    .sidebar--navigation .is--level1 .navigation--entry.has--sub-children.is--active::before {
        font-size: 5px;
    }
}
